<template>
    <div>
        <!--页面结构-->
        <span v-text="name" class="pink"></span>
        <button @click="add1(1,2)">add</button>

        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <!--路由占位符-->
        <router-view></router-view>

        <!-- 使用mint-ui中的button组件 -->
        <mt-button type="danger" size="large" @click="add1(4,5)">danger</mt-button>

        <!-- 使用mui中的9宫格样式 -->
        <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-home"></span>
                            <div class="mui-media-body">Home</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                            <div class="mui-media-body">Email</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">Chat</div></a></li>
                </ul> 
        </div>

        <!-- mui的图文表格 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../statics/imgs/shuijiao.jpg" height="333" width="500">
                    <div class="mui-media-body">
                        幸福
                        <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../statics/imgs/muwu.jpg" height="333" width="500">
                    <div class="mui-media-body">
                        木屋
                        <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                    </div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="../statics/imgs/cbd.jpg" height="333" width="500">
                    <div class="mui-media-body">
                        CBD
                        <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
//按需导入
import {add} from './calc.js';
import {Toast} from 'mint-ui';

    //function add(x,y){console.log(x+y);}
    //module.export = {} // es5

    //本质上是一个Vue组件
    export default{
        data:function(){
            return {
                name:'人生何处不相逢'
            }
        },
        methods:{
            //add, //es6语法 相当于es5 ： add:add
            add1:add,
            //substrict:calc.substrict
            tip:function(){
                Toast('你好');
            }
        }
    }
</script>


<style scoped>
    .pink {
        color:pink;
    }
    /*scoped的含义：此处的css文件只在当前Vue文件中有效*/
</style>





